<script setup lang='ts'>
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores/auth'
const router = useRouter()
function ToHomePage(){
  router.push('/client/HomePage')
}
function ToMyCart(){
  router.push('/client/MyCart')
}
function ToCategory(){
  router.push('/client/category')
}
function ToMyOrders(){
  router.push('/client/MyOrders')
}
const auth = useAuthStore()
function handleLogout(){
  auth.logout()
}
function ToLogin(){
  router.push('/')
}
</script>

<template>
  <div class="clent-top">
    <div class="top-container">
      <div class="brand" @click="ToHomePage">在线商城</div>
      <div class="nav">
        <a class="nav-item" @click="ToHomePage">商城首页</a>
        <a class="nav-item" @click="ToCategory">商品分类</a>
        <a class="nav-item" @click="ToMyCart">我的购物车</a>
        <a class="nav-item" @click="ToMyOrders">我的订单</a>
      </div>
      <div class="account">
        <template v-if="auth.isLoggedIn">
          <span>您好，{{ auth.userName }}</span>
          <a class="nav-item" style="margin-left:10px" @click="handleLogout">退出</a>
        </template>
        <template v-else>
          <span>您未登录</span>
          <a class="nav-item" style="margin-left:10px" @click="ToLogin">登录</a>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.clent-top{
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #ebeef5;
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-container{ max-width: 1200px; margin: 0 auto; height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 12px; }
.brand{ color: #5c6ac4; font-size: 20px; font-weight: 700; cursor: pointer; }
.nav{ display: flex; align-items: center; gap: 14px; }
.nav-item{ color: #303133; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.nav-item:hover{ background: #f5f7fa; }
.account{ margin-left: auto; color: #909399; }
</style>